<template>
    <div class="table-container" :class="{ opacity:isOpacity }" :style="{ padding:noPadding ? '0' : 'var(--mPadding)' }">
        <div v-if="hasControls" class="control-container">
            <div class="control-wrapper" v-for="(item, index) in controls" :key="index">
                <component 
                    :is="controlMaps[item.type]" 
                    :payload="item.payload" 
                    :form="optional" 
                    :data="item" 
                    :total="item.total" 
                    :fieldMaps="item.fieldMaps"
                    @search="item.search" 
                    
                ></component>
            </div>
            <div class="control-wrapper">
                <div  class="flex-btn" @click="handleSearch">
                    <i class="ri-search-line"></i>查询
                </div>
                <div class="flex-btn gray" style="margin-left:var(--mPadding);" @click="handleReset">
                    <i class="ri-reset-left-line"></i>重置
                </div>
            </div>
        </div>
        <el-table
            ref="tableRef"
            :data="sourceData" 
            :show-overflow-tooltip="true" 
            :border="hasBorder" 
            :header-cell-style=" isOpacity ? {} : { background: '#f6f7f9',color:'#1D2129' }" 
            @selection-change="handleSelection"
            :span-method="combineMethod"
            :cell-style="cellStyle"
            @row-click="handleRowClick"
            @cell-click="handleCellClick"
        >
            <template #empty>
                {{ emptyText || '暂无数据' }}
            </template>
            <template v-for="item in column" >
                <TableColumn :data="item" />
            </template>
        </el-table>
        <!-- 分页符 -->
        <el-pagination 
            v-if="hasPagination"
            class="flex-pagination"
            layout="prev, pager, next" 
            v-model:current-page="pageInfo.page" 
            v-model:page-size="pageInfo.pageSize" 
            :total="total" 
            @current-change="handleSearch"
        ></el-pagination>
    </div>
</template>

<script setup>  
    import { reactive, watch, ref, h, onUpdated } from 'vue';
    import TableColumn from './TableColumn.vue';
    import FlexInput from '@/components/FlexInput.vue';
    import FlexSelect from '@/components/FlexSelect.vue';
    import FlexDatePicker from '@/components/FlexDatePicker.vue';
    import FlexTreeSelect from '@/components/FlexTreeSelect.vue';
    const tableRef = ref();
    const props = defineProps({
        sourceData:{ type:Array },
        column:{ type:Array },
        hasControls:{ type:Boolean, default:true },
        controls:{ type:Array, default:[] },
        total:{ type:Number },
        hasBorder:{ type:Boolean, default:false },
        hasSearch:{ type:Boolean, default:true },
        hasPagination:{ type:Boolean, default:true },
        noPadding:{ type:Boolean, default:false },
        combineMethod:{ type:Function, default:()=>{} },
        cellStyle:{ type:Function },
        emptyText:{ type:String },
        isOpacity:{ type:Boolean, default:false },
        pageInfo:{ type:Object }
    });
    const emit = defineEmits(['search', 'selection', 'row-click']);
    defineExpose({ tableRef });
    // 根据控件类型构建一个全局的响应式数据
    function initOption(){
        const obj = {};
        if ( props.controls && props.controls.length ) {
            props.controls.forEach((item, index)=>{
                obj[item.paramKey] = '';
            });
        }
        return obj;
    }
   
    let optional = reactive(initOption());
    const controlMaps = {
        'input':FlexInput,
        'select':FlexSelect,
        'date':FlexDatePicker,
        'daterange':FlexDatePicker,
        'treeselect':FlexTreeSelect
    }
    function handleSearch(){
        emit('search', optional);
    }

    function handleReset(){
        props.pageInfo.page = 1;
        Object.keys(optional).forEach(key=>{
            optional[key] = ''
        })        
        handleSearch();  
    }
    function handleRowClick(row){
        emit('row-click', row);
    }
    function handleCellClick(row){
        emit('cell-click', row)
    }
    function handleSelection(arr){
        emit('selection', arr);
    }
   
</script>
<style lang="scss">
    .control-container {
        display:flex;
        margin-bottom:var(--mPadding);
        white-space:nowrap;
        .control-wrapper {
            margin-left:var(--mPadding);
        }
        .control-wrapper:first-child {
            margin-left:0;
        }
        .control-wrapper:last-child {
            margin-left:calc( 2 * var(--lPadding));
        }
    }
    // 自适应Table组件
    .table-container.opacity {
        background:transparent;
        .el-table {
            background:transparent;
            .el-table__inner-wrapper::before {
                background-color:transparent;
            }
            .el-table__header {
                th {
                    border-bottom:none;
                    background-color:transparent;
                }
            }
            .el-table__body {
                td {
                    border-bottom:none;
                    background-color:transparent;
                }
            }
            tr {
                background:transparent;
            }
            .el-table__row:hover td {
                background:transparent;
            }
          
        }
    }
    .table-container {
        background:#fff;
        .el-table{
            margin-bottom:2vh;
            .el-table__header {
                .el-table__cell {
                    padding:var(--sPadding) 0;
                    font-weight:normal;
                }
                .cell {
                    font-size:var(--baseFontSize);
                    line-height:var(--lPadding);
                    padding:0 var(--sPadding);
                    white-space:nowrap;
                    
                }
                .el-table__cell.noPadding {
                    .cell {
                        padding:0;
                        white-space:nowrap;
                        text-align:center;
                    }
                }
                .el-table__cell.align {
                    text-align:center;
                }
            }
            .el-table__body {
                .el-table__cell {
                    padding:var(--sPadding) 0;
                }
                .cell {
                    font-size:var(--baseFontSize);
                    line-height:var(--lPadding);
                    padding:0 var(--sPadding);
                    .embed {
                        color:#000;
                    }
                    .vertical {
                        text-align:center;
                        white-space:pre-wrap;
                        font-size:var(--12FontSize);
                        line-height:var(--12FontSize);
                    }
                }
                .el-table__cell.noPadding {
                    .cell {
                        padding:0;
                        white-space:nowrap;
                        text-align:center;
                    }
                }
                .action-container {
                    display:flex;
                }
                .action-container > div {
                    cursor: pointer;
                    color:var(--primaryColor);
                    margin-right:var(--mPadding);
                    i {
                        margin-right:calc(var(--sPadding)/2);
                    }
                }
            }
        }
}

</style>
